<script setup>
import { ref, onMounted, onUnmounted } from 'vue';

const props = defineProps({
  items: {
    type: Array,
    required: true,
    default: () => []
  },
  theme: {
    type: String,
    default: 'light'
  },
  customClass: {
    type: String,
    default: ''
  },
  zIndex: {
    type: Number,
    default: 1000
  },
  closeOnClick: {
    type: Boolean,
    default: true
  },
  showIcons: {
    type: Boolean,
    default: true
  }
});

const emit = defineEmits(['item-click', 'contextmenu-open']);

const visible = ref(false);
const position = ref({ x: 0, y: 0 });
const menuRef = ref(null);

// 显示菜单
const show = (event) => {
  event.preventDefault();
  position.value = {
    x: event.clientX,
    y: event.clientY
  };
  visible.value = true;
  emit('contextmenu-open');
  
  // 添加全局点击事件监听
  document.addEventListener('click', handleClickOutside);
};

// 隐藏菜单
const hide = () => {
  visible.value = false;
  document.removeEventListener('click', handleClickOutside);
};

// 处理菜单项点击
const handleItemClick = (item) => {
  if (item.disabled) return;
  
  emit('item-click', item);
  if (item.handler) {
    item.handler(item);
  }
  
  if (props.closeOnClick) {
    hide();
  }
};

// 处理点击外部
const handleClickOutside = (event) => {
  if (menuRef.value && !menuRef.value.contains(event.target)) {
    hide();
  }
};

// 组件卸载时清理
onUnmounted(() => {
  document.removeEventListener('click', handleClickOutside);
});

// 暴露方法给父组件
defineExpose({
  show,
  hide
});
</script>

<template>
  <div v-show="visible"
       ref="menuRef"
       :class="[
         'right-click-menu',
         `theme-${theme}`,
         customClass
       ]"
       :style="{
         left: `${position.x}px`,
         top: `${position.y}px`,
         zIndex
       }">
    <ul class="menu-list">
      <template v-for="item in items" :key="item.id || item.label">
        <!-- 分隔线 -->
        <li v-if="item.divider" class="menu-divider"></li>
        <!-- 菜单项 -->
        <li v-else
            :class="[
              'menu-item',
              { 'disabled': item.disabled }
            ]"
            @click="handleItemClick(item)">
          <span v-if="showIcons && item.icon" :class="['item-icon', item.icon]"></span>
          <span class="item-label">{{ item.label }}</span>
          <!-- 子菜单指示器 -->
          <span v-if="item.children" class="submenu-arrow">▶</span>
        </li>
      </template>
    </ul>
  </div>
</template>

<style>
.right-click-menu {
  position: fixed;
  background: #ffffff;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
  padding: 5px 0;
  min-width: 150px;
}

.menu-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu-item {
  padding: 8px 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.menu-item:hover {
  background-color: #f5f7fa;
}

.menu-item.disabled {
  color: #c0c4cc;
  cursor: not-allowed;
}

.menu-divider {
  height: 1px;
  margin: 5px 0;
  background-color: #e4e7ed;
}

.item-icon {
  margin-right: 8px;
  width: 16px;
  text-align: center;
}

.item-label {
  flex: 1;
}

.submenu-arrow {
  margin-left: 8px;
  font-size: 12px;
}

/* 深色主题 */
.theme-dark {
  background: #303133;
  border-color: #606266;
}

.theme-dark .menu-item {
  color: #ffffff;
}

.theme-dark .menu-item:hover {
  background-color: #409EFF;
}

.theme-dark .menu-divider {
  background-color: #606266;
}

.theme-dark .menu-item.disabled {
  color: #909399;
}
</style>